<template>
  <div class="mainrec_info_container">
    <!--  -->
    <div class="first_container">
      <span style="margin-right: 10px">款号</span>
      <el-input
        v-model="styleNumberInputValue"
        @input="styleNumberInputInput"
        clearable
      ></el-input>
    </div>
    <!-- 线 -->
    <p class="line"></p>
    <div class="second_container">
      <el-button type="primary" icon="el-icon-search" @click="queryBtnClick"
        >查询</el-button
      >
    </div>

    <div class="third_container">
      <el-table
        height="77vh"
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{
          background: '#f4f4f4',
          padding: 0,
          height: '40px'
        }"
        :cell-style="{ padding: 0, height: '30px' }"
      >
        <el-table-column label="设置主推" width="180">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.mainTypeNumber"
              active-color="#409EFF"
              inactive-color="#DCDFE6"
              @change="tableColSwitchStatusChange(scope.row, $event)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="styleNumber" label="款号" width="180">
        </el-table-column>
        <el-table-column> </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page_container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[50, 80, 110, 140]"
        layout="total, sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
// 页面接口
import {
  getMainStyleNumber_data_api,
  updateStyleNumber_data_api
} from '../../../request/baseInfo/main_recomend_info_request.js'
export default {
  data() {
    return {
      // 款号输入的值
      styleNumberInputValue: '',
      tableData: [],
      //   当前的页码
      page: 1,
      //   分页条数
      limit: 20,
      //   默认当前显示在第几页
      currentPage4: 1,
      total: 0
    }
  },
  methods: {
    //   款号输入框改变的时候触发的事件
    styleNumberInputInput(val) {
      this.styleNumberInputValue = val.toUpperCase()
    },
    //   查询按钮被点击
    async queryBtnClick() {
      const paramsObj = {
        limit: this.limit,
        page: this.page,
        styleNumber: this.styleNumberInputValue
      }
      const { data: res } = await getMainStyleNumber_data_api(paramsObj)
      console.log(res, 'getMainStyleNumber_data_api')
      if (res.code !== 200) return
      // 成功没有数据，那么就返回并且清空原来的数据
      if (res.code === 200 && res.data.length === 0) {
        this.$message.warning('暂无数据')
        this.tableData = []
        return
      }
      //   成功
      res.data.forEach((item) => {
        if (item.mainTypeNumber === 0) {
          item.mainTypeNumber = false
        }
        if (item.mainTypeNumber === 1) {
          item.mainTypeNumber = true
        }
      })
      this.total = res.total
      this.tableData = res.data
    },
    // switch状态被改变的额时候，触发的函数
    // 采取事件源参数，传递参数
    async tableColSwitchStatusChange(row, bool) {
      console.log(row, 'row')
      console.log(bool, 'tableColSwitchStatusChange')
      const upParamsObj = {
        styleNumber: row.styleNumber,
        type: bool ? 1 : 0
      }
      const { data: res } = await updateStyleNumber_data_api(upParamsObj)
      console.log(res, 'updateStyleNumber_data_api')
      if (res.code !== 200) return
      //   成功
      this.$message.success('设置成功')
    },
    // 每页显示多少条发生变化的时候
    handleSizeChange(pageSize) {
      this.limit = pageSize
      this.queryBtnClick()
    },
    // 点击第几页发生变化的时候
    handleCurrentChange(pages) {
      this.page = pages
      this.queryBtnClick()
    }
  }
}
</script>

<style lang="less" scoped>
.mainrec_info_container {
  background-color: #fff;
  padding: 10px;
}
.line {
  width: 100%;
  border-bottom: 2px solid #f4f4f4;
  margin-top: 10px;
  margin-bottom: 10px;
}
.first_container {
  //输入框的样式
  // input输入框的样式
  /deep/.el-input {
    .el-input__icon {
      line-height: 34px;
    }
    // 宽度生效
    width: 150px;
    height: 32px;
    .el-input__inner {
      height: 32px;
    }
  }
}
.third_container {
  margin-top: 10px;
}
.page_container {
  display: flex;
  justify-content: flex-end;
  margin-top: 1vh;
  /deep/.el-input__inner {
    width: 100px;
  }
}
</style>
